<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="24" class="card-panel-col">
        <div class="card-panel">
          <div class="card-panel-icon-wrapper icon-system">
            <i class="el-icon-s-platform"></i>
          </div>
          <div class="card-panel-description">
            <div class="card-panel-text">毕业设计选题管理系统</div>
            <div class="card-panel-subtitle">构建稳定、易用、功能完善的在线选题平台</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div class="stat-panel">
          <div class="stat-icon-wrapper" style="background: #409EFF;">
            <i class="el-icon-user-solid"></i>
          </div>
          <div class="stat-info">
            <div class="stat-label">学生用户</div>
            <div class="stat-desc">浏览题目 · 申请志愿</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div class="stat-panel">
          <div class="stat-icon-wrapper" style="background: #67C23A;">
            <i class="el-icon-s-custom"></i>
          </div>
          <div class="stat-info">
            <div class="stat-label">教师用户</div>
            <div class="stat-desc">发布题目 · 审核学生</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div class="stat-panel">
          <div class="stat-icon-wrapper" style="background: #E6A23C;">
            <i class="el-icon-s-tools"></i>
          </div>
          <div class="stat-info">
            <div class="stat-label">管理员</div>
            <div class="stat-desc">题目审核 · 数据统计</div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
        <div class="stat-panel">
          <div class="stat-icon-wrapper" style="background: #F56C6C;">
            <i class="el-icon-s-check"></i>
          </div>
          <div class="stat-info">
            <div class="stat-label">双向选择</div>
            <div class="stat-desc">自主申请 · 规范流程</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="role-title">
              <i class="el-icon-user" style="color: #409EFF;"></i>
              学生角色功能
            </span>
          </div>
          <div class="text item">
            <ul class="feature-list">
              <li><i class="el-icon-check"></i>个人信息与技术栈管理</li>
              <li><i class="el-icon-check"></i>浏览已审核题目</li>
              <li><i class="el-icon-check"></i>志愿报名（第一/第二志愿）</li>
              <li><i class="el-icon-check"></i>实时查看审核状态</li>
              <li><i class="el-icon-check"></i>选题变更申请</li>
            </ul>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="role-title">
              <i class="el-icon-user-solid" style="color: #67C23A;"></i>
              教师角色功能
            </span>
          </div>
          <div class="text item">
            <ul class="feature-list">
              <li><i class="el-icon-check"></i>发布与管理选题</li>
              <li><i class="el-icon-check"></i>设置难度等级和标签</li>
              <li><i class="el-icon-check"></i>查看学生详细信息</li>
              <li><i class="el-icon-check"></i>审核录取/拒绝申请</li>
              <li><i class="el-icon-check"></i>审核选题变更请求</li>
            </ul>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="role-title">
              <i class="el-icon-setting" style="color: #E6A23C;"></i>
              管理员角色功能
            </span>
          </div>
          <div class="text item">
            <ul class="feature-list">
              <li><i class="el-icon-check"></i>批量导入师生信息</li>
              <li><i class="el-icon-check"></i>选题审批与监管</li>
              <li><i class="el-icon-check"></i>题目修改审核</li>
              <li><i class="el-icon-check"></i>用户账号管理</li>
              <li><i class="el-icon-check"></i>数据统计与分析</li>
            </ul>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="role-title">
              <i class="el-icon-s-operation" style="color: #409EFF;"></i>
              系统业务流程
            </span>
          </div>
          <div class="process-container">
            <el-steps :active="3" align-center>
              <el-step title="课题发布" description="教师发布题目，管理员审核"></el-step>
              <el-step title="学生选题" description="浏览题目，提交双志愿申请"></el-step>
              <el-step title="教师审核" description="审核学生申请，确定录取"></el-step>
              <el-step title="变更管理" description="支持换题申请，双重审核"></el-step>
            </el-steps>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <el-card class="advantage-card" shadow="hover">
          <div class="advantage-content">
            <i class="el-icon-lightning advantage-icon"></i>
            <h4>高效便捷</h4>
            <p>在线操作，实时反馈</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <el-card class="advantage-card" shadow="hover">
          <div class="advantage-content">
            <i class="el-icon-view advantage-icon"></i>
            <h4>信息透明</h4>
            <p>状态可查，流程清晰</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <el-card class="advantage-card" shadow="hover">
          <div class="advantage-content">
            <i class="el-icon-data-analysis advantage-icon"></i>
            <h4>数据可视</h4>
            <p>统计分析，图表展示</p>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6">
        <el-card class="advantage-card" shadow="hover">
          <div class="advantage-content">
            <i class="el-icon-s-claim advantage-icon"></i>
            <h4>规范管理</h4>
            <p>流程标准，权限清晰</p>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Index'
}
</script>

<style scoped lang="scss">
.card-panel-col {
  margin-bottom: 20px;
}

.card-panel {
  height: 108px;
  cursor: default;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 20px;
  display: flex;
  align-items: center;

  .card-panel-icon-wrapper {
    float: left;
    margin-right: 20px;
    padding: 16px;
    transition: all 0.3s;
    border-radius: 6px;

    i {
      font-size: 48px;
      color: #fff;
    }
  }

  .icon-system {
    background: #40c9c6;
  }

  .card-panel-description {
    float: left;
    margin-top: 5px;

    .card-panel-text {
      line-height: 32px;
      color: rgba(0, 0, 0, 0.85);
      font-size: 24px;
      font-weight: 500;
      margin-bottom: 8px;
    }

    .card-panel-subtitle {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.45);
    }
  }
}

.stat-panel {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  transition: all 0.3s;

  &:hover {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
  }

  .stat-icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;

    i {
      font-size: 32px;
      color: #fff;
    }
  }

  .stat-info {
    flex: 1;

    .stat-label {
      font-size: 16px;
      color: #303133;
      font-weight: 500;
      margin-bottom: 4px;
    }

    .stat-desc {
      font-size: 13px;
      color: #909399;
    }
  }
}

.box-card {
  margin-bottom: 20px;

  .role-title {
    font-size: 16px;
    font-weight: 500;
    color: #303133;

    i {
      margin-right: 8px;
      font-size: 18px;
    }
  }

  .feature-list {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      padding: 10px 0;
      font-size: 14px;
      color: #606266;
      border-bottom: 1px solid #f0f2f5;

      &:last-child {
        border-bottom: none;
      }

      i {
        color: #67C23A;
        margin-right: 8px;
      }
    }
  }
}

.process-container {
  padding: 20px 0;
}

.advantage-card {
  margin-bottom: 20px;
  text-align: center;

  .advantage-content {
    padding: 10px;

    .advantage-icon {
      font-size: 48px;
      color: #409EFF;
      margin-bottom: 12px;
    }

    h4 {
      font-size: 16px;
      color: #303133;
      margin-bottom: 8px;
      font-weight: 500;
    }

    p {
      font-size: 13px;
      color: #909399;
      margin: 0;
    }
  }
}

::v-deep .el-step__title {
  font-size: 14px;
}

::v-deep .el-step__description {
  font-size: 12px;
}
</style>